<template>
  <div class="city-content" ref="wrapper">
    <div class="wrapper">
      <div class="content-title border-topbottom">当前城市</div>
      <ul class="city-label-list">
        <li class="label-item">
          <div class="label-item-content">{{ this.city }}</div>
        </li>
      </ul>
      <div class="content-title border-topbottom">热门城市</div>
      <ul class="city-label-list">
        <li class="label-item" v-for="item of hotCities" :key="item.id" >
          <div class="label-item-content"  @click="handleCityClick" >{{ item.name }}</div>
        </li>
      </ul>
    <div v-for="(alphaItem, key, index) of cities" :key="index" :ref="key">
        <div class="content-title border-topbottom">{{ key }}</div>
        <ul class="city-list">
            <li class="border-bottom" v-for="item of alphaItem" :key="item.id" @click="handleCityClick">{{ item.name }}</li>
        </ul>
    </div>
    </div>
  </div>

</template>

<script>
  import BScroll from 'better-scroll'
  import { mapState, mapMutations } from "vuex"

  export default {
    name: "CityList",
    props: {
      hotCities: Array,
      cities: Object,
      currentAlpha: String
    },
    data() {
      return {
        scroll: {},
      }
    },
    computed: {
      ...mapState(["city"])
    },
    watch: {
      currentAlpha(newAlpha) {
        let element = this.$refs[newAlpha][0];
        // console.log(element);
        this.scroll.scrollToElement(element);
      }
    },
    methods: {
      handleCityClick(event) {
        this.changeCity(event.target.innerText);
        this.$router.push("/");
      },
      ...mapMutations(["changeCity"])
    },
    mounted() {
      this.scroll = new BScroll(this.$refs.wrapper, {
        click: true
      });
    }
  }
</script>

<style lang="scss" scoped>
  .city-content {
    position: absolute;
    top: 1.58rem;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    /*background-color: red;*/
    .border-topbottom {

      &:before {
        border-color: #CCC;
      }
      &:after {
        border-color: #CCC;
      }
    }

    .border-bottom {
      &:before {
        border-color: #CCC;
      }
    }
    .content-title {
      line-height: .6rem;
      background-color: #eeeeee;
      text-indent: .2rem;
      color: #666;
    }

    .city-label-list {
      padding: .1rem .6rem .1rem .1rem;
      overflow: hidden;
      box-sizing: border-box;
      .label-item {
        float: left;
        width: 33.33%;
        .label-item-content {
          border: 1px solid #CCC;
          margin: .1rem;
          text-align: center;
          line-height: .6rem;
          border-radius: .06rem;
          box-sizing: border-box;
        }
      }
    }

    .city-list {
      li {
        line-height: .6rem;
        text-indent: .2rem;
        color: #666;
      }
    }
  }
</style>